---
title: Ripple
date: 2023-11-18
description: An animated ripple effect typically used behind elements to emphasize them.
author: dillionverma
published: true
video: https://cdn.magicui.design/ripple.mp4
---

<ComponentPreview name="ripple-demo" />

<Steps>

### Installation

Copy and paste the following code into your project.

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        ripple: "ripple 3400ms ease infinite",
      },
      keyframes: {
        ripple: {
          "0%, 100%": {
            transform: "translate(-50%, -50%) scale(1)",
          },
          "50%": {
            transform: "translate(-50%, -50%) scale(0.9)",
          },
        },
      },
    },
  },
};
```

```text
components/magicui/ripple.tsx
```

<ComponentSource name="ripple" />

</Steps>
